<template>
  <section v-loading="loading">
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;float: right">
        <el-button size="mini" @click="addActBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="activityList">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="名称" prop="title" width="150px">
      </el-table-column>
      <el-table-column label="开始" :formatter="formatDate" prop="start">
      </el-table-column>
      <el-table-column label="结束" :formatter="formatDate" prop="end">
      </el-table-column>
      <el-table-column label="设置内容">
        <template slot-scope="scope">
          <el-button type="text" @click="setActDetailBtn(scope.row)">详情</el-button>
          <el-button type="text" @click="goDesign(scope.row)">设计</el-button>
          <el-button size="mini" type="text" @click="newShareBtn(scope.row)">分享活动</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" @click='editBtn(scope.row)' size="mini" icon="edit">编辑</el-button>
          <el-button @click='delBtn(scope.row)' size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;"
                   background
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="actDetailDialog" :title="currActivity.title" v-if="currActivity" width="80%">
      <act-detail :activity="currActivity" v-on:cancel="getActivityList(0,filterObj)"></act-detail>
    </el-dialog>

    <el-dialog :visible.sync="newShareDialog" title="分享活动" v-if="currShare">
      <new-share :share="currShare" v-on:success="saveShareBtn"></new-share>
    </el-dialog>

    <el-dialog :visible.sync="actEditDialog" :title="currActivity.id?'编辑':'新建'" v-if="currActivity">
      <act-edit :activity="currActivity" v-on:cancel="getActivityList(0,filterObj)"></act-edit>
    </el-dialog>
  </section>
</template>

<script>
  import newShare from '@/components/share&access/newShare'
  import actEdit from './activityEdit'
  import actDetail from './activityDetail/index'
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "index",
    components:{filterTool,searchTool,actEdit,actDetail,newShare},
    data() {
      return {
        loading:false,
        totalPage:0,
        filterObj:{},
        activityList:null,
        actEditDialog:false,
        currActivity:null,
        actDetailDialog:false,
        newShareDialog:false,
        currShare:null
      }
    },
    created(){
      this.getActivityList()
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      formatDate(row, column, cellValue, index){
        return dateFormater.formatDatetime(cellValue)
      },
      goPage(val){
        this.getActivityList(0,this.filterObj)
      },
      getActivityList(pageNo,filterObj){
        this.fetch({name:"getActivityListByAdmin",data:{page:pageNo?pageNo:0,departmentId:this.department.id,...filterObj}})
          .then(res=>{
            console.log(res.content)
            this.activityList=res.content
            this.totalPage=res.totalPages
            this.loading = false
            this.actEditDialog=false
            this.actDetailDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addActBtn(){
        this.currActivity={
          title:'',
          start:'',
          end:'',
          repeatable:false,
          departmentId:this.department.id,
          data:{}
        }
        this.actEditDialog=true
      },
      editBtn(row){
        this.currActivity=row
        this.actEditDialog=true
      },
      delBtn(row){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteActivity",data:{id:scope.row.id}})
              .then(res=>{
                this.getActivityList(0,this.filterObj)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      setActDetailBtn(row){
        console.log('看下当前活动---------',row)
        this.currActivity=row
        this.actDetailDialog=true
      },
      newShareBtn(row){
        this.currShare={
          contentType:1,
          contentValue:row.id,
          computeType:1,
          title:'活动分享',
          img:row.data.shareImg,
          cId:null,memberId:null,data:{}
        }
        this.newShareDialog=true
      },
      filterEvent(e,objK){
        console.log('筛选条事件---------',e,objK)
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        console.log('看下filterObj----------',this.filterObj)
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        console.log('看下tmp----------',tmp)
        this.getActivityList(0,tmp)//筛选入库单列表
      },
      searchProductEvent(e){
        this.filterObj.key=e
        this.getActivityList(0,this.filterObj)//搜索入库单列表
      },
      saveShareBtn(e){
        console.log('一个活动分享--------',e.data.wxaCodeUrl)
        this.$alert('<!DOCTYPE html><html><body ><img src="'+e.data.wxaCodeUrl+'" style="width: 50%;height: 50%"/></body></html>',
          '所属：'+e.memberName, {
            dangerouslyUseHTMLString: true,
            center: true
          })
      },
      goDesign(e){
        this.$router.push({path:'/activity/visual/'+e.id})
      }
    }
  }
</script>

<style scoped>

</style>
